<template>
	<view class="msg">
		<tui-section title="分部验收信息" is-line background="#f8f8f8"></tui-section>
		<view class='lis'>
			<view class='title'>验收编号</view><text class="row">{{msgList[0]?.subsectionCode}}</text>
		</view>
		<view class='lis'>
			<view class='title'>单位工程</view><text
				class="row">{{msgList[0]?.unitProjectName+'('+msgList[0]?.subUnitProjectName+')'}}</text>
		</view>
		<view class='lis'>
			<view class='title'>分部工程</view><text class="row">{{msgList[0]?.subsectionName}}</text>
		</view>
		<view class='lis'>
			<view class='title'>子分部工程数</view><text class="row">{{msgList[0]?.tenderSubsectionQuantity}}</text>
		</view>
		<view class='lis'>
			<view class='title'>分项工程数</view><text class="row">{{msgList[0]?.branchQuantity}}</text>
		</view>
		<view class='lis'>
			<view class='title'>验收日期</view><text
				class="row">{{msgList[0]?.checkStartDate+' 至 '+msgList[0]?.checkEndDate}}</text>
		</view>
		<view class='lis'>
			<view class='title'>质量控制资料</view><text class="row">{{msgList[0]?.controlData}}</text>
		</view>
		<view class='lis'>
			<view class='title'>安全和功能检验</view><text class="row">{{msgList[0]?.safetyFunctional}}</text>
		</view>
		<view class='lis'>
			<view class='title'>观感质量</view><text class="row">{{msgList[0]?.appearance}}</text>
		</view>
		<view class='lis'>
			<view class='title'>备注</view><text class="row">{{msgList[0]?.memo}}</text>
		</view>
		<tui-section title="未分部验收子分部工程信息" is-line background="#f8f8f8"></tui-section>
		<view class="list" v-for="item in msgList[0]?.projectTenderSubsectionViewRespList" :key="item.projectLotId">
			<view class="listTitle">{{item.tenderSubsectionName}}</view>
			<view class='lot'>【分项工程数】{{item.branchQuantity}}</view>
		</view>
		<!-- </tui-white-space> -->
		<!-- 审批 -->
		<tui-form v-if="approvalRole==='true' && Status === '审批中'" ref="formRef" :show-message="false"
			:model="formData">
			<tui-section title="审批" is-line background="#f8f8f8"></tui-section>
			<tui-form-item asterisk label="审批结果" prop="isPass">
				<tui-radio-group @change='radioChange'>
					<tui-label v-for="(item,index) in radioItems" :key="index">
						<tui-list-cell>
							<view class="thorui-align__center">
								<tui-radio :checked="item.checked" :value="item.value" color="#07c160"
									borderColor="#999">
								</tui-radio>
								<text class="tui-text">{{item.name}}</text>
							</view>
						</tui-list-cell>
					</tui-label>
				</tui-radio-group>
			</tui-form-item>
			<tui-form-item asterisk label="审批意见" prop="remark">
				<tui-textarea v-model="formData.remark" placeholder="请输入审批意见"></tui-textarea>
			</tui-form-item>
			<view style="padding:0 10px 10px 10px;">
				<tui-form-button text="审批" @click="submit"></tui-form-button>
			</view>

		</tui-form>

		<!-- 审批意见 -->
		<view v-if="Status !== '审批中'" style="margin-bottom: 10px;">
			<tui-section title="审批意见" is-line background="#f8f8f8"></tui-section>
			<view v-if='approvalComment!="null"' style="color:red;padding:20rpx 40rpx">{{approvalComment}}
			</view>
		</view>

		<!-- 审批不通过编辑删除 -->
		<view v-if="approvalRole==='false' && Status === '审批不通过'" class="btn">
			<tui-button style="margin-right: 5px;" @click='reEdit(subsectionId)'>重新编辑</tui-button>
			<tui-button style="margin-left: 5px;" @click='deleteTenderSubsectionId(subsectionId)'>删除</tui-button>
		</view>

	</view>
</template>

<script setup lang='ts'>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getFullProjectSubsectionInfo,
		deleteUnSubProjectSubsection,
		completeProjectSubsectionTask,
	} from '@/apis/subsection.js'
	const formRef = ref(null);
	let msgList = reactive([])
	const subsectionId = ref(0)
	const approvalRole = ref(false)
	const Status = ref('')
	const approvalComment = ref('')
	const radioItems = [{
			name: '不通过',
			value: '0',
			checked: true
		},
		{
			name: '通过',
			value: '1',
			checked: false
		}
	]

	const rules = [{
		name: "remark",
		rule: ["required"],
		msg: ["请输入审批意见"]
	}];
	const formData = ref({
		id: 0,
		isPass: 0,
		remark: "",
	})

	const radioChange = (e) => {
		console.log(e.detail.value);
		formData.value.isPass = +e.detail.value
	}

	const submit = () => {
		if (formRef.value) {
			formRef.value.validate(formData.value, rules, true).then((res) => {
				if (res.isPass) {
					if (formData.value.isPass == 1 || formData.value.isPass == 0 && formData.value.remark.trim() != '') {
						completeProjectSubsectionTask(formData.value).then(res => {
							if (res.data.code === 200) {
								// plus.nativeUI.toast("审批成功");
								uni.navigateBack()
							}
						})
					}
				} else {
					plus.nativeUI.toast("不通过请输入审批意见");
				}
			})
		}
	}

	onLoad(({
		id,
		flowStatus,
		approval,
		comment
	}) => {
		subsectionId.value = id
		formData.value.id = +id
		Status.value = flowStatus
		approvalRole.value = approval
		approvalComment.value = comment
		getFullProjectSubsectionInfo(id).then(res => {
			console.log(res.data.data);
			msgList.push(res.data.data);
		})
	})

	//删除分项验收
	const deleteTenderSubsectionId = (id) => {
		// showConfirm("是否确认删除", () => {})
		//   .then(() => {
		deleteUnSubProjectSubsection(id).then(res => {
			if (res.data.code === 200) {
				uni.navigateBack()
			}
		})
	}

	//重新编辑分项验收
	const reEdit = (id) => {
		uni.navigateTo({
			url: `/pages/subsection/newSubsection?subsectionId=${subsectionId.value}`
		})
	}
</script>

<style scoped lang="scss">
	.msg {
		// padding: 20rpx;
		background-color: #ffffff;

		.lis {
			display: flex;
      line-height: 50rpx;
			margin: 10rpx 60rpx;
			color: #7f7f7f;

			.title {
				width: 30%;
			}

			.row {
				width: 70%;
				word-wrap: break-word;
			}
		}

		.list {
			background-color: white;
			padding: 10px 15px;
			border-radius: 10px;

			// margin-bottom: 20px;
			.listTitle {
				color: #4f4f4f;
				font-size: 17px;
				text-indent: 10px;
			}

			.lot {
				margin: 5px 0;
				color: grey;
				font-size: 16px;
				text-indent: 15px;
			}
		}

		.thorui-align__center {
			display: flex;
			align-items: center;
		}

		.tui-text {
			font-size: 30rpx;
			padding-left: 12rpx;
		}

		.btn {
			display: flex;
			justify-content: space-between;
			margin: 0 20rpx;
			padding-bottom: 20rpx;
		}
	}
</style>